<template>
  <a-form :model="searchObj" layout="inline">
    <a-form-item label="借款人姓名" name="borrower">
      <a-input v-model:value="searchObj.borrower" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="onSearch">搜索</a-button>
    </a-form-item>
  </a-form>
  <a-button type="primary" @click="handleCreate">添加借款人</a-button>
  <a-table
    @change="onTableChange"
    :pagination="pagination"
    :columns="columns"
    :data-source="data"
  >
    <template #bodyCell="{ column, record, text }">
      <template v-if="column.dataIndex === 'method'">
        <a-space>
          <a-button type="primary" @click="() => handleEdit(record)"
            >编辑</a-button
          >
          <a-button>删除</a-button>
        </a-space>
      </template>
    </template>
  </a-table>

  <AddEdit
    @cancel="cancel"
    :isOpen="isOpen"
    :edit-data="editObj"
    @success="onSuccess"
  />
</template>
<script setup>
import { ref } from "vue";
import { getLoansList } from "../../service/loans";
import AddEdit from "./components/addEdit.vue";

// 对表单的配置
const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "借款人",
    dataIndex: "borrower",
    key: "borrower",
  },
  {
    title: "借款金额",
    dataIndex: "amount",
    key: "amount",
  },

  {
    title: "操作",
    dataIndex: "method",
    key: "method",
  },
];

// 外部搜索表单的数据
const searchObj = ref({});
// 分页的数据
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
});
// 表格的数据
const data = ref([]);
// 请求表格数据
const getData = async () => {
  const res = await getLoansList({
    // 添加pageNumber和pageSize
    pageNumber: pagination.value.current,
    pageSize: pagination.value.pageSize,
    // 将搜索的数据，结构到请求的参数中
    ...searchObj.value,
  });
  // 渲染表格数据
  data.value = res.data.data.record;
  // 更新total，以便计算页码
  pagination.value.total = res.data.data.totalItems;
};
// 在组件创建的时候，请求数据
getData();

// 点击页码时触发的方法
const onTableChange = (value) => {
  const { current, pageSize } = value;
  // 更新页码和每页条数
  pagination.value.current = current;
  pagination.value.pageSize = pageSize;
  // 触发搜索（在搜索中已经完成了请求数据的拼接）
  getData();
};
// 点击搜索时触发的方法
const onSearch = () => {
  // 点击搜索，将页码重置为1，以防止搜索后，页码不对导致页面数据不显示
  pagination.value.current = 1;
  // 触发搜索
  getData();
};
//---------------------------
// 以下是编辑新增的逻辑，具体的逻辑是：
// 1. 点击编辑按钮
// 2. 填充数据
// 3. 修改数据并提交
// 4. 提示用户成功
// 5. 刷新列表
// 6. 清除数据
//---------------------------
// 传递给子组件的编辑的数据
const editObj = ref({});
// 标识模态框是否打开的变量
const isOpen = ref(false);
// 点击新增
const handleCreate = () => {
  // 打开模态框
  isOpen.value = true;
};
// 点击表格中的编辑按钮触发的方法
const handleEdit = (value) => {
  // 将当前数据填充到editObj中，以传递给子组件
  editObj.value = { ...value };
  // 打开模态框
  isOpen.value = true;
};

// 子组件点击取消按钮后触发的方法
const cancel = () => {
  // 关闭模态框
  isOpen.value = false;
  // 清空编辑数据
  editObj.value = {};
};

// 子组件新增或者编辑成功后触发的方法
const onSuccess = () => {
  // 更新列表数据
  getData();
  // 关闭模态框
  isOpen.value = false;
};
</script>
